<html>
	<head>
		<title>Manage User</title>		
		<link rel="stylesheet" href="css/metro-bootstrap.css">			
		<script src="js/jquery/jquery.min.js"></script>		
		<script src="js/jquery/jquery.widget.min.js"></script>		
		<script src="js/metro/metro-input-control.js"></script>
		<script src="js/metro/metro-hint.js"></script>
		<script src="js/metro/metro-tab-control.js"></script>
		<script src="js/metro/metro-accordion.js"></script>
		<script src="js/metro/metro-calendar.js"></script>
		<script src="js/metro/metro-datepicker.js"></script>	
		<script src="js/metro/date-format.js"></script>
		<script src="js/jquery/html5shiv.min.js"></script>
		<script src="js/jquery/html5shiv.js"></script>
		<script src="js/jquery/respond.min.js"></script>
		<link rel="stylesheet" href="css/costum.css">	

	<script>
		//FONT RESIZING
		$(document).ready(function(){
		  // Reset Font Size
		  var originalFontSize = $('html').css('font-size');
			$(".resetFont").click(function(){
			$('html').css('font-size', originalFontSize);
		  });
		  // Increase Font Size
		  $(".increaseFont").click(function(){
			var currentFontSize = $('html').css('font-size');
			var currentFontSizeNum = parseFloat(currentFontSize, 10);
			var newFontSize = currentFontSizeNum*1.2;
			$('html').css('font-size', newFontSize);
			return false;
		  });
		  // Decrease Font Size
		  $(".decreaseFont").click(function(){
			var currentFontSize = $('html').css('font-size');
			var currentFontSizeNum = parseFloat(currentFontSize, 10);
			var newFontSize = currentFontSizeNum*0.8;
			$('html').css('font-size', newFontSize);
			return false;
		  });
		});

  </script>		
	</head>
	
	<body>
		<div class="metro">
			<div class="grid container fluid">
			<!-- START HEADER -->
        <div class="row">
            <div class="span8 bg-white">
                <div class="padding20">
					<nav class="horizontal-menu">
							<li><a href="http://priawadi.blogspot.com">Home</a></li>
							<li><a href="http://priawadi.blogspot.com">FAQ</a></li>
							<li><a href="http://priawadi.blogspot.com">Feedback</a></li>
							<li><a href="http://priawadi.blogspot.com">Contact Us</a></li>
							<h2><strong>ELECTRONIC LABOR EXCHANGE</strong><h2>
							<img src="images\logoMoha.png" class="span10">
					</nav>						        
                </div>
            </div>
			
            <div class="span4">
                <div class="row">
				<button class="success span4 offset3">EMPLOYER</button>
				<button>JOBSEEKER</button><br/>
				<!-- 
                       <div class="tab-control" data-role="tab-control">
							<ul class="tabs">
								<li class="active"><a href="#_page_1">EMPLOYER</a></li>
								<li><a href="#_page_2">JOBSEEKER</a></li>
							</ul>						 
						</div>
				-->		
				<small>Welcome <strong><a href="">Jobseeker88</a></strong></small>,
				<small><button class="button warning mini"><span class="icon-user-2"></span>Login</button></small>
				<small><button class="button warning mini"><span class="icon-user-3"></span>Register</button></small>
				<br/>
				<small class="offset6"><a href="">Forgot Password</a></small>
				<img src="images\logoBrunei.png" class="span4 offset7"><br/><br/>
				</div>
			
								<!-- Text Resizing -->
						<div id="changeFont">
							<strong><a href="#" class="increaseFont">A+</a></strong>
							<strong><a href="#" class="resetFont">A</a></strong>
							<strong><a href="#" class="decreaseFont">A-</a></strong>
						</div>
			
						<div class="search">
							<form>
								<div class="input-control text">
								<a href=""><img src="images\search.png"></a>
									<input type="text" class="span10" placeholder="Search...">
								</div>
							</form>
						</div>
               
				
            </div>			
		</div>
			
		<!-- Menu -->
		<div class="row">
			<ul id="menu">
				<li id="job"><a href=""></a></li>
				<li id="training"><a href=""></a></li>
				<li id="events"><a href=""></a></li>
				<li id="gallery"><a href=""></a></li>
				<li id="chat"><a href=""></a></li>
			</ul>
		</div>
		
		<!-- END HEADER-->
		
	<!-- START BODY-->	
	<body class="metro">
	<div class="row">
	
	<!-- START ADVANCED SEARCH-->
		<div class="input-control text">
			<input type="text" placeholder="Search user by name" class="span5 offset7" />
			<button class="btn-search"></button>
		</div>	
	<!-- END ADVANCED SEARCH-->
	
	<legend>Manage User</legend>
		<div class="accordion" data-role="accordion">	
			<div class="accordion-frame">
				<a class="heading bg-lightBlue fg-white collapsed" href="#">+ Add New User</a>
				<div class="content" style="display: none;">
					<div class="row">               
						<div class="input-control text span4">
							<input type="text" value="" placeholder="login name"/>
							<button class="btn-clear"></button><br/>
						</div>						

						<div class="input-control text span4">
							<input type="text" value="" placeholder="input first name"/>
							<button class="btn-clear"></button>
						</div>
						
						<div class="input-control text span4">
							<input type="text" value="" placeholder="input last name"/>
							<button class="btn-clear"></button>
						</div>					
					</div>
					<div class="row">
						<div class="input-control password span4">
							<input type="password" value="" placeholder="input password"/>
							<button class="btn-reveal"></button>
						</div>
		
						<div class="input-control text span4">
							<input type="email" value="" placeholder="input email"/>
						</div>
						
						
								<div class="span4">
									<div class="input-control text" data-role="datepicker">
										<input type="text">
										<button class="btn-date"></button>
									</div>
								</div>
					</div>
					<div class="row">
						<div class="input-control file span4">
							<input type="file" value="" placeholder="input IC number"/>
							<button class="btn-file"></button>
						</div><br/>
					</div>
						<div class="row">
						<button class="info">Add</button>
						<button class="danger">Cancel</button>
						</div>
					
				</div>
			</div>
		</div>
			
        <table class="table striped">
            <thead>
            <tr>
                <th class="text-left">Nomer</th>
                <th class="text-left">Username</th>
                <th class="text-left">Fullname</th>
                <th class="text-left">Phone</th>
                <th class="text-left">Email</th>
				<th class="text-left">Action</th>
            </tr>
            </thead>

            <tbody>
            <tr><td>1</td><td class="center">admin1</td><td class="center">Admin Keren1</td><td class="center">0852-0000-0000</td><td class="center">admin@admin.com</td><td class="center"><button class="danger">Delete</button></td></tr>
            <tr><td>2</td><td class="center">admin2</td><td class="center">Admin Keren2</td><td class="center">0852-0000-0000</td><td class="center">admin@admin.com</td><td class="center"><button class="danger">Delete</button></td></tr>
            <tr><td>3</td><td class="center">admin3</td><td class="center">Admin Keren3</td><td class="center">0852-0000-0000</td><td class="center">admin@admin.com</td><td class="center"><button class="danger">Delete</button></td></tr>
            <tr><td>4</td><td class="center">admin4</td><td class="center">Admin Keren4</td><td class="center">0852-0000-0000</td><td class="center">admin@admin.com</td><td class="center"><button class="danger">Delete</button></td></tr>
            <tr><td>5</td><td class="center">admin5</td><td class="center">Admin Keren5</td><td class="center">0852-0000-0000</td><td class="center">admin@admin.com</td><td class="center"><button class="danger">Delete</button></td></tr>
            <tr><td>6</td><td class="center">admin6</td><td class="center">Admin Keren6</td><td class="center">0852-0000-0000</td><td class="center">admin@admin.com</td><td class="center"><button class="danger">Delete</button></td></tr>
            </tbody>

            <tfoot></tfoot>
        </table>
		
		<div class="row" class="offset3">
			<div class="pagination">
            <ul>
                <li class="first"><a><i class="icon-first-2"></i></a></li>
                <li class="prev"><a><i class="icon-previous"></i></a></li>
                <li><a>1</a></li>
                <li><a>2</a></li>
                <li class="active"><a>3</a></li>
                <li class="spaces"><a>...</a></li>
                <li class="disabled"><a>4</a></li>
                <li><a>500</a></li>
                <li class="next"><a><i class="icon-next"></i></a></li>
                <li class="last"><a><i class="icon-last-2"></i></a></li>
            </ul>
			</div>
		</div><br/>			
<!-- START FOOTER-->			
		<div class="row">		
			<div class="bg-dark">
				<div class="container">
					<div class="grid no-margin">
						<div class="row no-margin pad30">					
								<div class="span3">
								<img src="images\job_post.png">
								<a href="" class="bottom">Find a Job</a><br>
								<a href="" class="bottom">Search Vacancy</a><br>
								<a href="" class="bottom">Latest Jobs</a>
								</div>
								<div class="span3">
								<img src="images\job_seekers.png">						
								<a href="" class="bottom">Register Job Seeker</a><br>
								<a href="" class="bottom">Job Seeker Login</a><br>
								</div>
								<div class="span3">
								<img src="images\employers.png">
								<a href="" class="bottom">Register an Employer</a><br>
								<a href="" class="bottom">Search Employers</a><br>
								<a href="" class="bottom">Employer Login</a>
								</div>
									
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- END FOOTER -->	
	
	
	</div>
	</div>
	<div id="footer" class="row">
    Copyright © 2013 ELX. All Rights Reserved
	</div>
	</body>
</html>